<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS二级导航菜单</title>
    <link rel="stylesheet" href="../css/nav.css">
</head>

<body>
    <div class="navbar">
        <div class="nav">
            <ul>
                <li>
                    <a href="">一级菜单1</a>
                </li>
                <li>
                    <a href="">一级菜单2</a>
                    <ol>
                        <li><a href="">二级菜单1</a></li>
                        <li><a href="">二级菜单2</a></li>
                        <li><a href="">二级菜单3</a></li>
                        <li><a href="">二级菜单4</a></li>
                        <li><a href="">二级菜单5</a></li>
                        <li><a href="">二级菜单6</a></li>
                    </ol>
                </li>
                <li>
                    <a href="">一级菜单3</a>
                    <ol>
                        <li><a href="">二级菜单1</a></li>
                        <li><a href="">二级菜单2</a></li>
                        <li><a href="">二级菜单3</a></li>
                        <li><a href="">二级菜单4</a></li>
                        <li><a href="">二级菜单5</a></li>
                        <li><a href="">二级菜单6</a></li>
                    </ol>
                </li>
                <li>
                    <a href="">一级菜单4</a>
                    <ol>
                        <li><a href="">二级菜单1</a></li>
                        <li><a href="">二级菜单2</a></li>
                        <li><a href="">二级菜单3</a></li>
                        <li><a href="">二级菜单4</a></li>
                        <li><a href="">二级菜单5</a></li>
                        <li><a href="">二级菜单6</a></li>
                    </ol>
                </li>
                <li>
                    <a href="">一级菜单5</a>
                </li>
                <!-- 滑动线条，这里需要设置滑动条的三角形 -->
                <li class="underline"></li>
            </ul>
        </div>
    </div>
</body>

</html>